<template>
  <div>
    <div class="ca">
        <!-- <div class="caseHeader">
          <img src="http://img3.yun300.cn/img/nyban6.jpg?tenantId=214398&viewType=1&k=1638866723000" alt="">
        </div> -->
        <title-bar class="animate__animated wowlive animate__fadeInDown"  :eTitle="'CLASSIC丨经典案例'"></title-bar>
        <div class="smallTitle">
          <div style="display:inline" @click="refresh">全部</div><span>|</span>
          <div style="display:inline" @click="refresh">住宅空间</div><span>|</span>
          <div style="display:inline" @click="refresh">别墅空间</div><span>|</span>
          <div style="display:inline" @click="refresh">创意商业</div>
        </div>
        <div class="cards">
          <div v-for="item in exampleList" :key="item.id">
            <ExampleCards 
              :imgUrl="item.imgUrl"
              :text="item.text"
              :text2="item.text2"
            ></ExampleCards>
          </div>
        </div>
    </div>
    <Btm></Btm>
  </div>
</template>

<script>
export default {
    data(){
      return {
        exampleList:[
          {
            id:1,
            imgUrl:'http://resources.jsmo.xin/templates/upload/14863/202205/1653389212620.jpg',
            text:'蓝花楹',
            text2:'xxxxxxxxxx'
          },
          {
            id:2,
            imgUrl:'http://resources.jsmo.xin/templates/upload/14863/202204/1651068317702.jpg',
            text:'时光道',
            text2:'xxxxxxxxxx'
          },
          {
            id:3,
            imgUrl:'http://resources.jsmo.xin/templates/upload/14863/202110/1634560340503.jpg',
            text:'怡然',
            text2:'xxxxxxxxxx'
          },
          {
            id:4,
            imgUrl:'http://resources.jsmo.xin/templates/upload/14863/202109/1630638665611.jpg',
            text:'玫瑰园',
            text2:'xxxxxxxxxx'
          },
          {
            id:5,
            imgUrl:'http://resources.jsmo.xin/templates/upload/14863/202201/1642057582254.jpg',
            text:'云隐',
            text2:'xxxxxxxxxx'
          },
          {
            id:6,
            imgUrl:'http://resources.jsmo.xin/templates/upload/14863/202107/162642687772.jpg',
            text:'想你',
            text2:'xxxxxxxxxx'
          },
          {
            id:7,
            imgUrl:'http://resources.jsmo.xin/templates/upload/14863/202110/1634637989786.jpg',
            text:'青云',
            text2:'xxxxxxxxxx'
          },
          {
            id:8,
            imgUrl:'http://resources.jsmo.xin/templates/upload/14863/202107/1626429803977.jpg',
            text:'陌路',
            text2:'xxxxxxxxxx'
          }
          
        ]
    };
    },
    components:{
        
    },
    mounted(){
      window.scrollTo(0,0)
    },
    created(){
      this.$nextTick(() => {
        new this.$wow({ boxClass: "wowlive" }).init();
      });
    },
    methods:{
      refresh(){
        this.$router.go(0)
      }
    }
}
</script>

<style lang='scss' scoped>
@import '@/assets/style/comm.scss';
.ca{
  margin: 150px 40px 0 40px;
}
      .caseHeader{
        margin-bottom: 20px;
        width: 100%;
      img{
        width: 100%;
        margin-top: 70px;
      }
    }
    .cards{
      display: flex;
      flex-wrap: wrap;
      padding: 0 20px
    }
    .cards div{
      margin-right: 1%;
      width:24%
    }
    .smallTitle{
      width:80%;
      margin:50px auto;
      text-align: center;
      margin-top: 60px;
    }
    .smallTitle span{
      padding:10px;
      font-size: 18px;
      color:gray;
    }
     .smallTitle div{
      padding:10px;
      font-size: 18px;
      color:gray;
      position:relative;
      cursor:pointer;
    }
    .smallTitle div:hover:after{
      width: 100%;
    }
    .smallTitle div::after{
      content:"";
      position:absolute;
      bottom:0;
      left:0;
      width:0;
      height:2px;
      background-color:#6e6c6c;
      transition:all ease-out 0.3s;
}
</style>